{% extends 'base.html' %}
{% load static %}
{% block title %}用户购票界面{% endblock %}
{% block css %}
<link href="{% static 'login.css' %}" rel="stylesheet" />
<style>
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        color: #333;
    }

    {#.container {#}
    {#    max-width: 800px;#}
    {#    margin: 0 auto;#}
    {#    padding: 20px;#}
    {#    background-color: #f9f9f9;#}
    {#}#}

    h1 {
        font-size: 24px;
        color: #555;
        margin-bottom: 20px;
    }

    table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
    }

    th,
    td {
        border: 1px solid #ccc;
        padding: 8px;
        text-align: center;
    }

    th {
        background-color: #f2f2f2;
        font-weight: bold;
    }

    tr:nth-child(even) {
        background-color: #f9f9f9;
    }

    tr:hover {
        background-color: #e1e1e1;
    }

    a {
        display: block;
        margin-bottom: 10px;
        text-decoration: none;
        color: #0099ff;
    }
</style>
{% endblock %}

{% block content %}
    <div class="d-flex flex-column flex-shrink-0 p-3 bg-light" style="width: 180px; position: fixed; height: 100%; overflow-y: auto;background-color: #ffffff;">
    <hr>
    <ul class="nav nav-pills flex-column mb-auto">
      <li class="nav-item">
        <a href="../efflog" class="nav-link active" aria-current="page">
          <svg class="bi me-2" width="16" height="16"><use xlink:href="#home"/></svg>
          查看日志信息
        </a>
      </li>
{#      <li>#}
{#        <a href="../aidecide" class="nav-link link-dark">#}
{#          <svg class="bi me-2" width="16" height="16"><use xlink:href="#speedometer2"/></svg>#}
{#          部署调试#}
{#        </a>#}
{#      </li>#}
      <li>
        <a href="../sysdata" class="nav-link link-dark">
          <svg class="bi me-2" width="16" height="16"><use xlink:href="#table"/></svg>
          人工和智能维护
        </a>
      </li>
{#      <li>#}
{#        <a href="../aidecide" class="nav-link link-dark">#}
{#          <svg class="bi me-2" width="16" height="16"><use xlink:href="#grid"/></svg>#}
{#          智能决策#}
{#        </a>#}
{#      </li>#}
      <li>
        <a href="../codeindex" class="nav-link link-dark">
          <svg class="bi me-2" width="16" height="16"><use xlink:href="#people-circle"/></svg>
          代码评估
        </a>
      </li>
    </ul>
    <hr>
</div>

<div class="container" style="margin-left: 300px; margin-top: 60px;">
    <h1 style="text-align: center">智能运维系统--运维人员</h1>

        <div id="main" style="width:100% ;height: 1000px;"></div>

{#    <a href="../efflog"><p style="text-align: center">查看日志信息</p></a>#}
{#    <a href="../aidecide"><p style="text-align: center">部署调试</p></a>#}
{#    <a href="../sysdata"><p style="text-align: center">人工维护</p></a>#}
{#    <a href="../aidecide"><p style="text-align: center">智能决策</p></a>#}
{#    <a href="../codeindex"><p style="text-align: center">代码评估</p></a>#}



</div>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.js"></script>
<script type="text/javascript">
    //初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'), 'macarons');

    const date_now = new Date();
    let year = date_now.getFullYear();
    let month = date_now.getMonth();
    let day = date_now.getDate();
    let hours = date_now.getHours();
    let minutes = date_now.getMinutes();
    let sec = date_now.getSeconds();
    let base = +new Date(year, month, day, hours,minutes,sec ) ;
    
    let oneDay = 24 * 3600 * 1000;
    let oneSec = 1000;
    base -= oneDay;
    let date = [];
    let data = [Math.random() * 100];
    for (let i = 1; i < 24*60*60; i++) {
      var now = new Date((base += oneSec));
      date_str = (now.getMonth()+1) +'月'+now.getDate() + '日' +now.getHours()+ ':' +now.getMinutes()+':' + (now.getSeconds()+1) ;
      date.push(date_str);
      let change = (Math.random() - 0.5) * 10;
       let newValue = data[i - 1] + change;
       newValue = Math.max(0, newValue);
       data.push(newValue);
    }
    max_CPU = Math.max.apply(null,data);
    let normalizedData = data.map(value => (value / max_CPU) * 100);
    console.log(max_CPU);
    // 指定图表的配置项和数据
    var option = {
        title: [ //文本数值显示
            {
                text: '总访问次数', x: '7%', y: '7%',
                textStyle: {fontSize: 20}
            },
            {
                text: '34220', x: '7.6%', y: '11%',
                textStyle: {fontSize: 30}
            },
            {
                text: '磁盘剩余容量', x: '19%', y: '7%',
                textStyle: {fontSize: 20}
            },
            {
                text: '34.32GB', x: '20.3%', y: '11%',
                textStyle: {fontSize: 30}
            },
            {
                text: '开机运行时间', x: '34%', y: '7%',
                textStyle: {fontSize: 20}
            },
            {
                text: '3d22h', x: '36.3%', y: '11%',
                textStyle: {fontSize: 30}
            },
            {
                text: '当前代码版本', x: '50%', y: '7%',
                textStyle: {fontSize: 20}
            },
            {
                text: '1.0.0', x: '53.2%', y: '11%',
                textStyle: {fontSize: 30}
            },
            {
                text: '服务器带宽上限', x: '69%', y: '7%',
                textStyle: {fontSize: 20}
            },
            {
                text: '30MB/s', x: '71.2%', y: '11%',
                textStyle: {fontSize: 30}
            },
            {
                text: '当前运行状况', x: '83%', y: '7%',
                textStyle: {fontSize: 20}
            },
            {
                text: '正常', x: '85.6%', y: '11%',
                textStyle: {fontSize: 30}
            },
            { //饼图
                text: '最近访问IP统计', x: '25%', y: '20%',
                textAlign: 'center',
                textStyle: {fontSize: 20}
            },
            { //饼图
                text: '最近日志记录', x: '67.5%', y: '20%',
                textStyle: {fontSize: 20}
            },
            { //堆积柱状图
                text: '最近内存状态统计', x: '25%', y: '58%',
                textAlign: 'center',
                textStyle: {fontSize: 20}
            },
            {
                text: '最近CPU占用率', x: '67.5%', y: '58%',
                textStyle: {fontSize: 20}
            }],
        tooltip: {
            trigger: 'axis',
            axisPointer: {type: 'shadow'}
        },
        grid: [{
            left: '5%', right: '55%', // 网格部分
            top: '65%', bottom: '5%',
            containLabel: true
        },
            {
                gridindex: 1,
                left: '50%', right: '5%',
                top: '65%', bottom: '5%',
                containLabel: true
            }],
        xAxis: [{
             type: 'category',
              boundaryGap: false,
              data: ['-7h', '-6h', '-5h', '-4h', '-3h', '-2h', '-1h']
        },
            {
                gridIndex: 1,
                type: 'category',
                boundaryGap: false,
                data: date
  
            }],
        yAxis: [{
            type: 'value',
            axisLabel: {
              formatter: '{value}%'
            },
            axisPointer: {
              snap: true
            }
        },
            {
                gridIndex: 1,
                type: 'value',
                axisLabel: {
              formatter: '{value}%'
            },
                //boundaryGap: [0, '100%']
  
            }],
        legend: {
    data: ['Line 1', 'Line 2', 'Line 3', 'Line 4']
  },
        series: [{ //饼图
            type: 'pie',
            center: ['25%', '42%'],
            radius: ['', '25%'],
            label: {normal: {formatter: '{b} :\n{c}({d}%)'}},
            data: [{value: 1032, name: '广东'},
                {value: 10096, name: '江苏'},
                {value: 1240, name: '上海'},
                {value: 15098, name: '天津'},
                {value: 4098, name: '北京'}]
        },
            { //饼图
                type: 'pie',
                center: ['73%', '42%'],
                radius: ['', '25%'],
                label: {normal: {formatter: '{b} :\n{c}({d}%)'}},
                data: [{value: 512, name: 'DNS错误'},
                    {value: 302, name: '内存占用过高'},
                    {value: 743, name: '正常日志记录'},
                    {value: 205, name: '异常访问'}]
            },
            
            {
      name: 'MySQL服务',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(128, 255, 165)'
          },
          {
            offset: 1,
            color: 'rgb(1, 191, 236)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [10, 19, 9, 22, 7, 29, 27]
    },
    {
      name: '缓存服务',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(0, 221, 255)'
          },
          {
            offset: 1,
            color: 'rgb(77, 119, 255)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [10, 25, 9, 8, 18, 27, 28]
    },
    {
      name: '平台主程序',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(55, 162, 255)'
          },
          {
            offset: 1,
            color: 'rgb(116, 21, 219)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [28, 12, 18, 26, 14, 12, 18]
    },
    {
      name: '日志记录程序',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(255, 0, 135)'
          },
          {
            offset: 1,
            color: 'rgb(135, 0, 157)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [18, 31, 21, 12, 19, 18, 10]
    },
            {
                xAxisIndex: 1, yAxisIndex: 1,
                  name: 'Fake Data',
                  type: 'line',
                  symbol: 'none',
                  sampling: 'lttb',
                  itemStyle: {
                    color: 'rgb(255, 70, 131)'
                  },
                  areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: 'rgb(255, 158, 68)'
                      },
                      {
                        offset: 1,
                        color: 'rgb(255, 70, 131)'
                      }
                    ])
                  },
                  data: normalizedData
    
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>


{% endblock %}